<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="实名认证"></u-navbar>
		<view class="d-p-30 box">
			<view class="d-font-32" style="font-weight: bold;color: #151C24;">专户统计</view>
			<view class="d-m-t-20">
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
						<text style="color: red;">*</text>
						项目名称
					</view>
					<view class="d-flex-1">
						<u--input border="none" v-model="form.gcmc" inputAlign="right" disabled disabledColor="#fff" placeholder="默认当前项目"></u--input>
					</view>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
						<text style="color: red;">*</text>
						施工企业
					</view>
					<view class="d-flex-1">
						<u--input
							border="none"
							v-model="$user.ssgcxx[this.$appIndex].deptName"
							inputAlign="right"
							disabled
							disabledColor="#fff"
							placeholder="默认当前施工企业"
						></u--input>
					</view>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;" @click="show.showDept = true">
					<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
						<text style="color: red;">*</text>
						所属单位
					</view>
					<view class="d-flex-1">
						<u--input border="none" v-model="form.deptName" inputAlign="right" placeholder="请选择所属企业" disabled disabledColor="#fff"></u--input>
					</view>
					<u-icon name="arrow-down" color="#8E9291" size="28rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="d-p-30 box d-m-t-30">
			<view class="d-font-32" style="font-weight: bold;color: #151C24;">{{ form.id ? '身份信息' : '验证身份证' }}</view>
			<view class="d-m-t-20">
				<view class="d-flex" v-if="!form.id">
					<u-upload
						@delete="del($event, 'zheng')"
						width="330rpx"
						height="208rpx"
						accept="image"
						@afterRead="upload($event, 'zheng')"
						:fileList="file.zheng"
						:maxCount="1"
					>
						<view class="up d-flex d-row-center"><u--image width="330rpx" height="208rpx" src="/static/image/zheng.png"></u--image></view>
					</u-upload>
					<u-upload @delete="del($event, 'fan')" width="330rpx" height="208rpx" accept="image" @afterRead="upload($event, 'fan')" :fileList="file.fan" :maxCount="1">
						<view class="up d-flex d-row-center"><u--image width="330rpx" height="208rpx" src="/static/image/fan.png"></u--image></view>
					</u-upload>
				</view>
				<view class="d-flex u-border-bottom d-m-t-10" style="height: 80rpx;">
					<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
						<text style="color: red;">*</text>
						证件姓名
					</view>
					<view class="d-flex-1"><u--input border="none" v-model="form.xm" inputAlign="right" placeholder="自动读取" disabled disabledColor="#fff"></u--input></view>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
						<text style="color: red;">*</text>
						公民身份号码
					</view>
					<view class="d-flex-1"><u--input border="none" v-model="form.zjhm" inputAlign="right" placeholder="自动读取" disabled disabledColor="#fff"></u--input></view>
				</view>
			</view>
		</view>

		<view class="d-p-30 box d-m-t-30 d-m-b-30" v-if="!form.id">
			<view class="d-font-32" style="font-weight: bold;color: #151C24;">验证身份证</view>
			<view class="d-flex d-row-center d-col-center d-p-t-32" @click="signAuth">
				<u--image v-if="isAuth && auth_photo" :src="auth_photo" width="267rpx" height="281rpx"></u--image>
				<u--image v-else src="/static/image/id.png" width="267rpx" height="281rpx"></u--image>
			</view>
			<view class="d-font-28 d-text-center d-p-t-30 d-p-b-20" style="color: #ADB4BD;">提示：点击图片前往人脸识别！</view>
		</view>

		<view class="bottom u-safe-area-inset-bottom">
			<view class="u-safe-area-inset-bottom d-flex d-row-center u-border-top">
				<view style="width: 500rpx;"><u-button text="下一步" shape="circle" type="primary" @click="addRealName2"></u-button></view>
			</view>
		</view>

		<u-picker
			:show="show.showDept"
			@cancel="show.showDept = false"
			closeOnClickOverlay
			@close="show.showDept = false"
			@confirm="setDept"
			:columns="[options.dept]"
			keyName="deptName"
		></u-picker>
	</view>
</template>

<script>
import { ssdwList, getOcrAuth, authDetail, checkBolZjhm } from '../../../common/api.js';
import { pathToBase64 } from 'image-tools';
export default {
	data() {
		return {
			form: {
				id: null, // 存在为编辑
				gcmc: '', // 项目名称：gcmc（获取当前用户所属项目名称）【必填】
				gcbh: '', // 项目编号：gcbh（获取当前用户所属项目编号）【必填】
				qybm: '', // 所属企业：qybm（根据所属企业下拉获取）【必填】
				qymc: '', // 所属企业名称：qymc（根据所属企业下拉获取）【必填】
				deptId: '', // 所属部门：deptId（根据所属企业下拉获取）【必填】
				deptName: '', // 所属部门名称：deptName（根据所属企业下拉获取）【必填】
				districtId: '', // 所属区划：districtId（根据所属企业下拉获取）【必填】
				districtName: '', // 所属区划名称：districtName（根据所属企业下拉获取）【必填】
				xm: '', // 姓名：xm（根据扫描身份证获取）【必填】
				zjhm: '', // 证件号码：zjhm（根据扫描身份证获取）【必填】
				// 第二页需要的信息
				csrq: '', // 出生日期:csrq（根据扫描身份证获取）【必填】
				xb: '', // 性别【字典=xb】:xb（根据身份证件号码计算获取，可以修改）【必填】
				mz: '', // 民族【字典=mz】:mz（默认值：汉族）【必填】
				jiguan: '', // 籍贯:jiguan
				hjszd: '', // 住址：hjszd【必填】
				qfjg: '', // 签发机关：qfjg（根据扫描身份证获取）
				yxksrq: '', // 有效期限开始：yxksrq（根据扫描身份证获取）
				yxjsrq: '' // 有效期限结束:yxjsrq（根据扫描身份证获取）
			},
			options: {
				dept: []
			},
			show: {
				showDept: false
			},
			file: {
				zheng: [],
				fan: []
			},
			isAuth: false, // 人脸比对结果 true
			id: null,
			auth_photo: null
		};
	},
	onLoad(e) {
		if (process.env.NODE_ENV !== 'development') {
			uni.removeStorageSync('store_form');
		}
		this.form.gcmc = this.$user.ssgcxx[this.$appIndex].gcmc;
		this.form.gcbh = this.$user.ssgcxx[this.$appIndex].gcbh;
		ssdwList({
			params: {
				deptId: this.$user.deptId,
				gcbh: this.$user.ssgcxx[this.$appIndex].gcbh
			}
		}).then(e => {
			this.options.dept = e.data;
		});
		if (e && e?.id) {
			// 编辑的时候需要赋值编辑
			this.id = e.id;
			this.form.id = e.id;
			authDetail({
				params: {
					id: e.id
				}
			}).then(e => {
				this.form = uni.$u.deepMerge(this.form, e.data);
				// 编辑的时候不需要实名验证
				this.isAuth = true;
			});
		}
	},
	onShow() {
		if (uni.getStorageSync('isAuth')) {
			this.isAuth = true;
			this.auth_photo = uni.getStorageSync('auth_photo');
			uni.removeStorageSync('isAuth');
		}
	},
	methods: {
		signAuth() {
			if (!this.form.xm || !this.form.zjhm) {
				return uni.$u.toast('请先上传身份证信息');
			}
			uni.$u.route({
				url: '/pages/index/member/signAuth'
			});
		},
		addRealName2() {
			if (!this.form.qymc) {
				return uni.$u.toast('请选择所属企业');
			}
			if (!this.form.id) {
				if (this.file.zheng.length <= 0) {
					return uni.$u.toast('请上传身份证正面');
				}
				if (this.file.fan.length <= 0) {
					return uni.$u.toast('请上传省份正反面');
				}
				// #ifndef H5
				if (!this.isAuth) {
					return uni.$u.toast('请先验证身份');
				}
				// #endif
			}
			uni.setStorageSync('store_form', this.form);
			uni.$u.route({
				url: '/pages/index/member/addRealName2'
			});
		},
		setDept(e) {
			this.show.showDept = false;
			let item = e.value[0];
			this.form.qybm = item.qybm || item.id; // 所属企业：qybm（根据所属企业下拉获取）【必填】
			this.form.qymc = item.qymc; // 所属企业名称：qymc（根据所属企业下拉获取）【必填】
			this.form.deptId = item.deptId; // 所属部门：deptId（根据所属企业下拉获取）【必填】
			this.form.deptName = item.deptName; // 所属部门名称：deptName（根据所属企业下拉获取）【必填】
			this.form.districtId = item.districtId; // 所属区划：districtId（根据所属企业下拉获取）【必填】
			this.form.districtName = item.districtName; // 所属区划名称：districtName（根据所属企业下拉获取）【必填】
		},
		upload(e, flag) {
			let url = e.file.url;
			this.file[flag] = [{ url: url, status: 'success', type: 'image' }];
			if (flag == 'fan') {
				uni.setStorageSync('fan', url);
			} else {
				// 上传需要清空之前的信息
				uni.setStorageSync('zheng', url);
				//#ifndef H5
				this.isAuth = false;
				// #endif
				this.form.xm = '';
				this.form.zjhm = '';
			}
			pathToBase64(url)
				.then(base64 => {
					getOcrAuth(
						{
							ImageBase64: base64
						},
						{
							custom: {
								noToken: true
							}
						}
					)
						.then(e => {
							if (flag == 'zheng') {
								uni.setStorageSync('idCardBase64', base64);
								uni.setStorageSync('idCard', url);
							} else {
								uni.setStorageSync('idCardBase64Fan', base64);
								uni.setStorageSync('idCardFan', url);
							}
							uni.request({
								url: 'https://ocr.tencentcloudapi.com',
								method: 'POST',
								header: {
									'X-TC-Region': 'ap-beijing',
									'X-TC-Version': '2018-11-19',
									'X-TC-Timestamp': e.timestamp,
									'X-TC-Action': 'IDCardOCR',
									Host: 'ocr.tencentcloudapi.com',
									'Content-Type': 'application/json; charset=utf-8',
									Authorization: e.data,
									'X-TC-RequestClient': 'SDK_JAVA_3.1.322'
								},
								data: {
									ImageBase64: base64
								},
								success: e => {
									let data = e.data;
									if (data.Response?.Error) {
										console.error('请求后的错误', data);
										this.file[flag] = [];
										return uni.$u.toast(data.Response.Error.Message);
									} else {
										if (flag == 'zheng') {
											if (
												!data.Response.Name ||
												!data.Response.IdNum ||
												!data.Response.Birth ||
												!data.Response.Sex ||
												!data.Response.Nation ||
												!data.Response.Address
											) {
												this.file[flag] = [];
												return uni.$u.toast('上传错误或模糊, 请重新上传身份证正面');
											}
											this.form.xm = data.Response.Name;
											this.form.zjhm = data.Response.IdNum;
											this.form.csrq = this.$moment(data.Response.Birth).format('YYYY-MM-DD'); // 出生日期:csrq（根据扫描身份证获取）【必填】
											this.form.xb = data.Response.Sex; // 性别【字典=xb】:xb（根据身份证件号码计算获取，可以修改）【必填】
											this.form.mz = data.Response.Nation + '族'; // 民族【字典=mz】:mz（默认值：汉族）【必填】
											this.form.hjszd = data.Response.Address; // 住址：hjszd【必填】
											// 检测证件号码
											checkBolZjhm({
												params: {
													zjhm: this.form.zjhm,
													gcbh: this.form.gcbh,
													id: this.id
												}
											})
												.then(e => {})
												.catch(e => {
													// #ifndef H5
													// 已存在 就不能继续 了
													this.file.zheng = [];
													this.form.xm = '';
													this.form.zjhm = '';
													return uni.$u.toast(e.msg);
													// #endif
												});
										} else {
											let date = data.Response.ValidDate;
											date = date.split('-');
											// 反面信息
											if (!data.Response.Authority || !data.Response.ValidDate || !date[0] || !date[1] || date[0] == date[1]) {
												this.file[flag] = [];
												return uni.$u.toast('上传错误或模糊, 请重新上传身份证反面');
											}
											this.form.qfjg = data.Response.Authority; // 签发机关：qfjg（根据扫描身份证获取）
											this.form.yxksrq = date[0]; // 有效期限开始：yxksrq（根据扫描身份证获取）
											this.form.yxjsrq = date[1]; // 有效期限结束:yxjsrq（根据扫描身份证获取）
										}
									}
								},
								fail: e => {
									console.error('腾讯错误', e);
								}
							});
						})
						.catch(e => {
							console.error('签名问题', e);
							this.file[flag] = [];
						});
				})
				.catch(e => {
					console.error('base64转码失败', e);
					this.file[flag] = [];
				});
		},
		del(e, flag) {
			this.file[flag] = [];
			if (flag == 'zheng') {
				this.form.xm = '';
				this.form.zjhm = '';
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.box {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
	}

	.bottom {
		height: 140rpx;
		box-sizing: content-box;
		& > view {
			height: 140rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
	}
}
</style>
